html[data-theme="light"] {
    --color-text: #000000;
    --color-btn: #0063CE;
    --color-border: #57585C;
    --login-bg: url("@/assets/login/login-bg-light.png");
    --login-bg-img: url("@/assets/login/login-background-light.png");
    --login-bg-title: url("@/assets/login/login-title-light.png");
    --login-icon-lock: url("@/assets/login/login-lock-light.png");
    --login-icon-user: url("@/assets/login/login-user-light.png");
    --header-bg: url("@/assets/header/header-bg-light.png");
    --module-bg: url("@/assets/public/background-light.png");
    --module-bg-color: transparent;
    --select-date: url("@/assets/theme/select-bg-right-light.png");
    --select-pr: url("@/assets/theme/select-bg-light.png") ;
    --select-big: url("@/assets/theme/select-bg-big-light.png");
    --select-big-r: url("@/assets/theme/select-bg-big-light-r.png");
    --menu-bg: url("@/assets/header/menu-bg-light.png");
    --menu-bg-active: url("@/assets/header/menu-bg-active-light.png");
    --menu-size: 26px;
    --header-btn-bg: rgba(44, 155, 234, 1);
    --header-btn-border-bg: rgba(44, 155, 234, 1);
    --header-btn-out: rgba(135, 49, 26, 0.53);
    --min-title-bg: url("@/assets/public/icon-title-light.png");
    --min-title-center-bg: url("@/assets/public/icon-title-center-light.png");
    --model-center-text-color: rgba(37, 76, 112, 1);
    --model-content-title: rgba(37, 76, 112, 1);
    --model-bg-color: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(222, 239, 255, 1));
    --model-header-bg: url("@/assets/public/model-title-light.png");
    --model-header-text-color: rgba(65, 91, 115, 1);
    --model-header-pl: 45px;
    --model-text-color: rgba(9, 75, 136, 1);
    --model-header-text-color: rgba(70, 125, 176, 1);
    --model-header-text-color-after: rgba(70, 125, 176, 1);
    --pagination-text: rgba(70, 125, 176, 1);
    --pagination-text-a: rgba(44, 155, 234, 0.15);
    --pagination-text-active: #fff;
    --input-bg: rgba(44, 155, 234, 0.20);
    --input-border: rgba(44, 155, 234, 1);
    --input-text: black;
    --select-bg: rgba(44, 155, 234, 0.20);
    --select-border: rgba(44, 155, 234, 1);
    --list-item-text-color: rgba(9, 75, 136, 1);
    --model-header-center: url("@/assets/public/model-title-center-light.png");
    --model-total-bg: url("@/assets/public/icon-total-light.png");
    --model-tab-bg: url("@/assets/public/icon-tab-light.png");
    --person-model-bg: url("@/assets/public/icon-person-bg-light.png");
    --person-model-total-bg: url("@/assets/public/icon-person-total-bg-light.png");
    --person-total-other: url("@/assets/public/icon-other-light.png");
    --person-model-min-bg: url("@/assets/public/icon-person-bg-light.png");
    --person-sex-text: rgba(37, 76, 112, 1);
    --hire-model-bg: url("@/assets/public/icon-hire-light.png");
    --hire-model-def-bg: url("@/assets/public/icon-hire-light.png");
    --person-model-def-bg: url("@/assets/public/icon-hire-light.png");
    --person-model-sm-bg: url("@/assets/public/icon-hire-light.png");
}

:root {
    --color-text: #ffffff;
    --color-btn: #0063CE;
    --color-border: #57585C;
    --login-bg: url("@/assets/login/login-bg.png");
    --login-bg-img: url("@/assets/login/login-background.png");
    --login-bg-title: url("@/assets/login/login-title.png");
    --login-icon-lock: url("@/assets/login/login-lock.png");
    --login-icon-user: url("@/assets/login/login-user.png");
    --header-bg: url("@/assets/header/header-bg.png");
    --module-bg: url("@/assets/public/background.png");
    --module-bg-color: rgba(0, 0, 0, 1);
    --select-date: url("@/assets/theme/select-bg-right.png");
    --select-pr: url("@/assets/theme/select-bg.png");
    --select-big: url("@/assets/theme/select-bg-big.png");
    --select-big-r: url("@/assets/theme/select-bg-big-r.png");
    --menu-bg: url("@/assets/header/menu-bg.png");
    --menu-bg-active: url("@/assets/header/menu-bg-active.png");
    --menu-size: 28px;
    --header-btn-bg: #143D66;
    --header-btn-border-bg: #1A4D80;
    --header-btn-out: rgba(135, 49, 26, 0.23);
    --min-title-bg: url("@/assets/public/icon-title.png");
    --min-title-center-bg: url("@/assets/public/icon-title-center.png");
    --model-center-text-color: #BCCDEB;
    --model-content-title: #fff;
    --model-bg-color: linear-gradient(180deg, #011D3A, #011D3A);
    --model-header-bg: url("@/assets/public/model-title.png");
    --model-header-text-color: #fff;
    --model-header-pl: 20px;
    --model-text-color: #fff;
    --model-header-text-color: rgba(0, 229, 255, 1);
    --model-header-text-color-after: rgba(255, 255, 255, 0.25);
    --pagination-text: #fff;
    --pagination-text-a: rgba(255, 255, 255, 0.10);
    --pagination-text-active: #fff;
    --input-bg: #012D58;
    --input-border: #0066E1;
    --input-text: #fff;
    --select-bg: #012D58;
    --select-border: #0066E1;
    --list-item-text-color: #fff;
    --model-header-center: url("@/assets/public/model-title.png");
    --model-total-bg: url("@/assets/public/icon-total.png");
    --model-tab-bg: url("@/assets/public/icon-tab.png");
    --person-model-bg: url("@/assets/public/icon-person-bg.png");
    --person-model-total-bg: url("@/assets/public/icon-person-total-bg.png");
    --person-total-other: url("@/assets/public/icon-other.png");
    --person-model-min-bg: url("@/assets/public/person-model-min-bg.png");
    --person-sex-text: "#fff";
    --hire-model-bg: url("@/assets/public/icon-hire.png");
    --hire-model-def-bg: url("@/assets/public/icon-hire-def.png");
    --person-model-def-bg: url("@/assets/public/icon-person-def.png");
    --person-model-sm-bg: url("@/assets/public/icon-person-sm.png");
}

.theme-text {
    color: var(--color-text);
}

:root:root {
    --el-color-primary: var(--color-btn);
    --el-border-color: var(--color-border);
    --el-border-color-hover: var(--color-btn);
}